<template>
  <view class="container">
    <!-- 顶部tabs -->
    <scroll-view 
      class="tabs" 
      scroll-x 
      :show-scrollbar="false"
      :scroll-into-view="'tab-' + currentTab"
    >
      <van-tabs v-model:active="active"  @click-tab="switchTab(index)">
        <van-tab :title="tab" v-for="(tab,index) in tabs" :key="index" :name="index">
        </van-tab>
      </van-tabs>
    </scroll-view>
    <!-- 内容区域 -->
    <swiper
      class="swiper-container"
      :current="currentTab"
      @change="handleSwiperChange"
      :style="{ height: 'calc(100vh - 44px)' }"
    >
      <swiper-item>
        <All />
      </swiper-item>
      <swiper-item>
        <Dali />
      </swiper-item>
      <swiper-item>
        <Lijiang />
      </swiper-item>
      <swiper-item>
        <Kunming />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Dali from './Dali.vue';
import Lijiang from './Lijiang.vue';
import Kunming from './Kunming.vue';
import All from './All.vue';

const tabs = ref(['全部', '大理', '丽江', '昆明']);
const currentTab = ref(0);
const active = ref(0);

const switchTab = (index) => {
  // console.log('active ',active.value);
  currentTab.value = active.value;
};

const handleSwiperChange = (e) => {
  currentTab.value = e.detail.current;
  active.value = e.detail.current;
};
</script>

<style lang="scss" >
.page{
  height: 100%;
  background-color: #f5f5f5;
}

.container {
  height: 100%;
  width: 100%;
}

.tabs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  
  .tabs-container {
    display: inline-flex;
    // padding: 20px 16px;
    min-width: 100%;
    justify-content: space-around;
  }
  
  .tab-item {
    position: relative;
    padding: 8px 24px;
    margin: 0 8px;
    font-size: 15px;
    color: #666666;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
    cursor: pointer;
    flex-shrink: 0;
    
    &:hover {
      color: #333333;
      background-color: rgba(0, 0, 0, 0.03);
    }
    
    &.active {
      color: #ffffff;
      background: linear-gradient(45deg, #333333, #666666);
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
}

.swiper-container {
  width: 100%;
  height: calc(100vh - 44px);
  margin-top: 44px;
}
</style> 